<template>
  <el-dialog
      :model-value="visible"
      :title="title"
      :width="`${width}%`"
      align-center
      :before-close="beforeClose"
      :destroy-on-close="destroyOnClose"
  >
    <slot></slot>
  </el-dialog>
</template>

<script lang="ts" setup name='CustomDialog'>
import {} from 'vue'

defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  //对话框宽度
  width: {
    type: Number
  },
  //标题
  title: {
    type: String,
    default: '标题'
  },
  //当关闭 Dialog 时，销毁其中的元素
  destroyOnClose: {
    type: Boolean,
    default: false
  }
})
let emits = defineEmits<{
  (event: 'update:visible', newVal: boolean): void
}>();
const beforeClose = (done: () => void) => {
  emits('update:visible', false)
}
</script>

<style scoped lang='less'>

</style>
